<template>
  <div class="departments-container">
    <div class="app-container">
      <!-- 带盒子阴影的div -->
      <el-card v-loading="loading" class="tree-card">
        <!-- 公司信息:用了一个行列布局,24份 -->
        <!-- 使用组件tree-tool -->
        <tree-tool :item="companyObj" @add-dept="handleShowAddDialog" />
        <!-- Tree组件:部门信息 -->
        <el-tree :data="deptTreeData" :props="{ label: 'name' }" default-expand-all>
          <!--
            作用域插槽获取每行部门对象，让组件的结构支持自定义
            data就是每行的部门对象
           -->
          <template #default="{ data }">
            <!-- 使用组件tree-tool -->
            <tree-tool
              :item="data"
              @del-dept="handleDelDept"
              @add-dept="handleShowAddDialog"
              @edit-dept="handleShowEditDialog"
            />
          </template>
        </el-tree>
      </el-card>
      <!--
        .sync修饰符总结:
        1.   .sync修饰符只是个语法糖;
        2.   .以这个代码为例:<jsck :title.sync="myTitle"></jack>
            等同于:
                  <jack
                      :title="myTitle"
                      @update:title="把组件传递过来的新值赋值给myTitle数据"
                  >
                  </jack>
        v-model指令:
            也只是个语法糖,本质是:value(v-bind) + input(v-on:input)
       -->
      <!-- 添加部门add-dept组件，用.sync 修饰符写 -->
      <add-dept :is-show.sync="isShow1" :dept-list="deptList" :item="deptObj" @add-dept-success="getDeptList" />
      <!-- 编辑部门 edit-dept 组件-->
      <edit-dept :is-show.sync="isShow2" :dept-list="deptList" :item="deptObj" @edit-dept-success="getDeptList" />
    </div>
  </div>
</template>

<script>
import { getDeptListAPI, delDeptAPI } from '@/api/departments'
import TreeTool from './components/tree-tool.vue'
import AddDept from './components/add-dept.vue'
import EditDept from './components/edit-dept.vue'

// 部门列表转为树形结构思路：
// 1.如果pid为空，说明当前部门是一级部门
// 2.如果pid不为空，判断谁的id与当前部门的pid全等，如果全等，
//      说明当前id的这个部门是pid部门的爹，要给爹这个添加孩子
// 注意：对于属性结果的处理，常用手段就是函数的递归
// 算法与数据结构
// 导入列表转树形函数
import { arr2Tree } from '@/utils/shift'

export default {
  name: 'DepartmentsView',
  components: { TreeTool, AddDept, EditDept },
  data () {
    return {
      // 部门列表数据
      deptList: [],
      // 部门树形数据
      deptTreeData: [],
      // 公司信息
      companyObj: {
        name: '',
        manager: '',
        id: ''
      },
      // 控制add-dept组件弹框的显示
      isShow1: false,
      // 控制edit-dept 组件弹框的显示
      isShow2: false,
      // 记录当前操作的部门对象
      // watch out
      deptObj: {},
      // 控制盒子的加载状态
      loading: false
    }
  },
  created () {
    this.getDeptList()
  },
  methods: {
    // 获取部门列表
    async getDeptList () {
      // 请求前显示loading状态
      this.loading = true
      // 调接口发请求
      const { data } = await getDeptListAPI()
      // console.log(data)
      this.companyObj.name = data.companyName
      this.companyObj.manager = data.companyManage
      this.companyObj.id = data.companyId

      // 这里不能直接赋值给treeDat，因为 deps 不符合树形结构
      // 调用list2Tree函数，把 depts 列表转为树形结构
      this.deptTreeData = arr2Tree(data.depts, '')
      // console.log(this.deptTreeData)
      // 保存一份列表数据
      this.deptList = data.depts

      // 请求结束，关闭loading
      this.loading = false
    },
    // 处理删除部门
    async handleDelDept (deptId) {
      // console.log(deptId)
      try {
        // 1.询问
        await this.$confirm('此操作不可逆，确定删除吗？', '温馨提示', {
          type: 'warning',
          cancelButtonText: '取消',
          confirmButtonText: '确定'
        })
        // 2.确定
        //    2.1 发请求(通知后台，从数据库中删除)
        await delDeptAPI(deptId)
        //    2.2 获取部门列表
        await this.getDeptList()
        //    2.3 给个删除成功的提示
        this.$message({
          message: '删除成功！',
          center: true
        })
      } catch (error) {
        // 3.取消
      }
    },
    // 显示添加部门弹窗
    handleShowAddDialog (deptObj) {
      this.isShow1 = true
      // 给正在操作的部门对象赋值
      this.deptObj = deptObj
    },
    // 显示编辑部门弹窗
    handleShowEditDialog (deptObj) {
      this.isShow2 = true
      // 给正在操作的部门对象赋值
      this.deptObj = deptObj
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url('~@/assets/common/add-circle.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url('~@/assets/common/minus-circle.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url('~@/assets/common/user-filling.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
